<template>
	<view>
		<view class="box-color box-padding u-m-b-20">
			<view v-if="role == 'sale'" class="u-font-30 u-m-b-30">
				{{ orderInfo.buyerShopName }}
			</view>
			<view v-else class="u-font-30 u-m-b-30">
				{{ orderInfo.sellerShopName }}
			</view>
			<view v-for="(item,index) in orderInfo.orderItems" @click="$mRouter.push({ route: '/pages/shangpin/xiangqing?id=' + item.itemId + '&sellerShopId=' + orderInfo.sellerShopId  })" style="position: relative;" :key="index" class="item u-flex u-m-b-20">
				<image :src="item.url" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;" mode=""></image>
				<image src="/static/order/giftMark.png" style="width: 70rpx;height: 70rpx;border-radius: 10rpx;position: absolute;bottom: 0;left: 0;" v-if="item.isGift" mode=""></image>
				<view class="u-flex-col u-row-around u-flex-1 u-m-l-20" style="height: 100rpx">
					<view class="u-flex u-row-between">
						<text class="u-font-24" style="height: 40rpx;overflow-y: hidden;">{{ item.itemName }}</text>
						<text class="u-font-24">￥{{ item.price }}</text>
					</view>
					<view class="u-flex u-row-between">
						<view class="new-grey-box">
							{{ item.specification }}
						</view>
						<view class="new-grey-box" style="margin-right: 0;">
							x{{ item.quantity }}
						</view>
					</view>
					<!-- <view class="u-flex u-row-right">
						<view v-if="orderInfo.state >= 1 && orderInfo.openAfterSales">
							<u-button shape="circle" :hair-line="false" :ripple="true" :custom-style="shBtStyle" @tap="toPage(item)">售后</u-button>
						</view>
					</view> -->
				</view>
			</view>
			<view class="u-font-28 grey-color u-m-t-10 u-m-b-30">
				<view class="u-flex u-row-between" style="height: 50rpx;">
					<view>商品种类</view>
					<view>{{ orderInfo.orderItems.length }}</view>
				</view>
				<view class="u-flex u-row-between" style="height: 50rpx;">
					<view>商品总数量</view>
					<view>{{ calcQuantityFn }}</view>
				</view>
				<view class="u-flex u-row-between" style="height: 50rpx;">
					<view>总价</view>
					<view>￥{{ orderInfo.amount }}</view>
				</view>
				
				<view class="u-flex u-row-between" style="height: 50rpx;" v-if="orderInfo.promotionReduction!=0">
					<view>活动</view>
					<view>-￥{{orderInfo.promotionReduction}}</view>
				</view>
				<view class="u-flex u-row-between" style="height: 50rpx;" v-if="orderInfo.promotionReduction!=0">
					<view></view>
					<view @click="openDadPopFn()" style="color: #FF551A;">查看详情 <u-icon name="arrow-right" color="#ff551a"></u-icon> </view>
				</view>
				<view class="u-flex u-row-between" style="height: 50rpx;" v-if="orderInfo.balanceReduction!=0">
					<view>账户余额</view>
					<view>-￥{{orderInfo.balanceReduction}}</view>
				</view>
				
				<!-- <view class="u-flex u-row-between" style="height: 50rpx;">
					<view>优惠卷</view>
					<view>-￥0.00</view>
				</view>
				<view class="u-flex u-row-between" style="height: 50rpx;">
					<view>账户余额</view>
					<view>-￥0.00</view>
				</view> -->
			</view>
			<view class="u-border-bottom"></view>
			<view class="u-flex u-row-right u-p-t-30  u-p-b-14">
				<text class="u-font-30 u-theme-main">实付款</text>
				<text :style="{fontSize: '32rpx', color: badgeColor}">￥{{ info.actualAmount }}</text>
			</view>
			<view class="u-flex u-p-t-30" style="border-top: 1px solid #eaeaea;" v-if="role==='buyer'">
				<view class="u-flex u-col-center u-row-center u-flex-1"  @click="againOnceOrder">
					<view class="u-flex u-col-center u-row-center" >
						<fui-icon name="plussign-fill" color="#FF551A" size="36"></fui-icon>
					</view>
					<view class="u-font-bold u-theme-main u-font-32 u-m-l-18" >
						再来一单
					</view>
				</view>
				<view class="u-flex u-col-center u-row-center u-flex-1" v-if="info.state >0"  @click="toPage()" style="border-left: 1rpx solid #eaeaea;">
					<view class="iconfont icon-shouhou  u-m-r-18 u-theme-main"  style="font-size: 44rpx;"></view>
					<view class="u-font-bold u-theme-main u-font-32" >
						发起售后
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			},
			role: {
				type: String,
				default: 'buyer'
			}
		},
		data() {
			return {
				shBtStyle: {
					height: '60rpx',
					width: '140rpx',
					fontSize: '26rpx',
					color: '#666666',
					// border: '1rpx solid #666666'
				},
			}
		},
		created() {
			// this.orderCount = this.info.orderItems.length;
			// console.log(this.orderInfo);
		},
		computed:{
			calcQuantityFn(){
				let totalCount = 0;
				totalCount=this.orderInfo.orderItems.reduce((totalCount,item)=>{return totalCount+item.quantity},0 )
				return totalCount;
			},
			orderInfo(){
				return Object.assign({
					orderItems:[]
				},this.info)
			},
			...mapState(useUserStore,['isBuyerAfterSales','isPurchase']),
		},
		methods: {
			openDadPopFn(){
				this.$emit('openPop');
			},
			// 售后
			toPage(item) {
				if (!this.isBuyerAfterSales) {
					return this.$u.toast('该账号没有开启售后的权限');
				}else{
					// item.specification = item.specification.replace('%', '%25')
					// item.tradeId = this.orderInfo.id
					this.$mRouter.push({ route: '/pages/mendian/order/middleService', query:{item:JSON.stringify(this.info.orderItems),id:this.info.id } })
				}
			},
			addFn(a,b){
			  return this.$mHelper.add(a,b)
			},
			async againOnceOrder(){
				if (!this.isPurchase) {
					return this.$u.toast('该账号没有开启下单的权限');
				}
				uni.showLoading({
					title:'loading...'
				})
				const res = await this.$newHttp.get('api/Trade/CopyToNew',{params:{tradeId:this.info.id}});
				uni.hideLoading();
				if(res.code == 200){
					this.$mRouter.reLaunch({ route: '/pages/cart/index' })
				}else{
					this.$u.toast('再来一单失败，错误信息：'+res.erroMessage)
				}
			},
			
			
		}
	}
</script>

<style>
	@import '@/static/iconfont/iconfont.css';
</style>
